<!--
 * @Description  :
 * @Autor        : guoxi
 * @Date         : 2022-06-06 14:54:52
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-10-10 09:51:17
 * @FilePath     : \rpms\src\components\treeTable\column.vue
-->
<template>
  <el-table-column v-for="(item, index) in model.column" :key="item" :width="item.width" :label="item.name"
    :align="item.align" :fixed="index == 0 ? true : false" header-align="center">
    <template v-if="!item.children" #default="scope">
      {{ getTableDefalutText(scope) }}
    </template>

    <template v-if="item.children" #default="cObj">
      <template v-if="item.children.length > 0">
        <el-table-column v-for="a in item.children" :key="a" :width="a.width" :label="a.name" :align="a.align">
          <template v-if="!a.children" #default="scope">
            {{ getTableText(scope) }}
          </template>
          <template v-if="a.children">
            <el-table-column v-for="b in a.children" :key="b" width="100" :label="b.name" :align="b.align">
              <template v-if="!b.children" #default="scope">
                {{ getTableText(scope) }}
              </template>
            </el-table-column>
          </template>
        </el-table-column>

      </template>
      <template v-else>
        {{ getTableText2(cObj) }}
      </template>
    </template>
  </el-table-column>
</template>
<script lang="ts">
import { nextTick } from "process";
import { defineComponent, onMounted, reactive, watch } from "vue";
import { getTypeNames } from "./data";
export default defineComponent({
  name: "ColumnCoustom",
  props: {
    colunms: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    dataType: {
      type: Array,
      default: () => []
    }
  },

  // emits: ["change", "load"],
  setup(props, ctx) {
    console.log(props, ctx);
    const model = reactive({
      column: [],
      data: [],
      typesName: getTypeNames()
    });

    const getTableDefalutText = ({ $index }) => {
      return model.typesName[$index] || "--";
    };

    const getTableText2 = (item) => {
      let colParentName = item.column.rawColumnKey.name;
      if(colParentName.indexOf('(万元)')!=-1){
        colParentName = colParentName.slice(0,colParentName.length-4)
      }
      const target = model.data.find(el => el.deptName === colParentName);
      const feeTypeName = model.typesName[item.$index];
      const fee = target.fees.find(el => el.subject === feeTypeName)
      return fee?.spendSum || 0;
    }

    const getTableText = item => {
      if (item.$index === -1) return "--";
      let colParentName = item.column.rawColumnKey.parent;
      if(colParentName.indexOf('(万元)')!=-1){
        colParentName = colParentName.slice(0,colParentName.length-4)
      }
      const target = model.data.find(el => el.deptName === colParentName);

      if (target) {
        const targetName = model.typesName[item.$index];
        const displayObj = target.fees.find(
          el => el.subject === targetName
        );
        if (displayObj) {
          if (item.column.rawColumnKey.parent2) {
            const colName = item.column.rawColumnKey.parent2;
            const keyObj = (props.dataType as any).find(
              el => el.value === colName
            );
            if (keyObj) {
              return displayObj[keyObj.key];
            }
          } else {
            const colName = item.column.rawColumnKey.name;
            const keyObj = (props.dataType as any).find(
              el => el.value === colName
            );
            if (keyObj) {
              return displayObj[keyObj.key];
            }
          }
        }
      }
      return "--";
    };
    // const getTableText2 = item => {
    //   if (item.$index === -1) return "--";
    //   const colParentName = item.column.rawColumnKey.parent;
    //   const target = model.data.find(el => el.dept === colParentName);
    //   const targetName = model.typesName[item.$index];
    //   const displayObj = target.fees.find(el => el.feeTypeName === targetName);

    //   if (target && displayObj) {
    //     const colName = item.column.rawColumnKey.name;
    //     const key = dataType2.find(el => el.value === colName).key;
    //     return displayObj[key];
    //   }
    //   return displayObj;
    // };
    onMounted(() => {
      nextTick(() => {
        if (props.colunms.length !== 0) {
          model.column = props.colunms;
        }
        if (props.data) {
          model.data = props.data;
        }
      });
    });

    watch(
      () => [props.data, props.colunms],
      ([v2, newvalue]) => {
        model.column = newvalue;
        model.data = v2;
      },
      { immediate: false }
    );
    return {
      model,
      getTableText2,
      getTableText,
      getTableDefalutText
    };
  }
});
</script>
<style lang="scss" scoped></style>
